<template>
  <div>
    <el-dialog
      class="my_dialog"
      v-bind="$attrs"
      v-on="$listeners"
      v-draggable
      width="700px"
      :visible="visible"
      @open="onOpen"
      @close="onClose"
      :title="title"
      :close-on-click-modal="false"
    >
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="medium"
        label-width="100px"
      >
        <el-form-item label="班次编码" prop="code">
          <el-input
            v-model="formData.code"
            placeholder="请输入班次编码"
            show-word-limit
            clearable
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
        <el-form-item label="班次名称" prop="name">
          <el-input
            v-model="formData.name"
            placeholder="请输入班次名称"
            show-word-limit
            clearable
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="上班时间" prop="beginTime">
              <el-time-select
                v-model="formData.beginTime"
                :picker-options="{
              start: '07:30',
              step: '00:30',
              end: '00:00'
              }"
                placeholder="选择时间">
              </el-time-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="下班时间" prop="endTime">
              <el-time-select
                v-model="formData.endTime"
                :picker-options="{
              start: '07:30',
              step: '00:30',
              end: '00:00'
              }"
                placeholder="选择时间">
              </el-time-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="上班分钟数" prop="onWorkMinute">
          <el-input
            v-model="formData.onWorkMinute"
            placeholder="请输入上班分钟数"
            show-word-limit
            clearable
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
        <el-form-item label="休息分钟数" prop="offWorkMinute">
          <el-input
            v-model="formData.offWorkMinute"
            placeholder="请输入休息分钟数"
            show-word-limit
            clearable
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否启用" prop="status" required>
          <el-switch
            v-model="formData.status"
            active-color="#13CE66"
            inactive-color="#FF4949"
            :active-value="0"
            :inactive-value="1"
          ></el-switch>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="formData.remark"
            type="textarea"
            placeholder="请输入备注"
            :autosize="{ minRows: 4, maxRows: 4 }"
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="onClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    inheritAttrs: false,
    components: {},
    props: ["title", "visible", "item"],
    data() {
      return {
        formData: {
          code: "",
          name: "",
          status: 0,
          beginTime: "",
          endTime: "",
          onWorkMinute: 0,
          offWorkMinute: 0,
          remark: undefined,
        },
        rules: {
          code: [
            {
              required: true,
              message: "请输入班次编码",
              trigger: "blur",
            },
          ],
          name: [
            {
              required: true,
              message: "请输入班次名称",
              trigger: "blur",
            },
          ],
          beginTime: [
            {
              required: true,
              message: "请选择上班时间",
              trigger: "change",
            },
          ],
          endTime: [
            {
              required: true,
              message: "请选择下班时间",
              trigger: "change",
            },
          ],
          onWorkMinute: [
            {
              required: true,
              message: "请输入上班分钟数",
              trigger: "blur",
            },
          ],
          offWorkMinute: [
            {
              required: true,
              message: "请输入休息分钟数",
              trigger: "blur",
            },
          ],
          remark: [
            {
              required: true,
              message: "请输入备注",
              trigger: "blur",
            },
          ],
        },
      };
    },
    computed: {},
    watch: {},
    created() {
    },
    mounted() {
    },
    methods: {
      onOpen() {
        this.$nextTick(() => {
          if (this.item) {
            this.formData = JSON.parse(JSON.stringify(this.item));
          }
        });
      },
      onClose() {
        this.$refs["elForm"].resetFields();
        this.close();
      },
      close() {
        this.$emit("update:visible", false);
      },
      handleConfirm() {
        let form = JSON.parse(JSON.stringify(this.formData));
        console.log(form);
        this.$refs["elForm"].validate((valid) => {
          if (!valid) return;
          this.$emit("Ok", form);
          this.close();
        });
      },
    },
  };
</script>
<style lang="scss" scoped>
  .dropdownbox{ z-index: 10001 !important; }

</style>
